<template>
  <div class="Tshop-con" style="background:#14003D;">
    <div class="banner">
      <!--swiper-->
      <div class="swiperouterbox">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide box_siz" v-for="(str,index) in data.detailImgArray" :key="index">
              <!--//:style="{ backgroundImage: 'url(' + str.url + ') no-repeat right' }"-->
              <img :src="str.detailImg" alt="" />
            </div>
          </div>
          <!--<div class="swiper-pagination"></div>-->
        </div>
      </div>
      <!--<img :src="data.vipCardImg" alt="">-->
    </div>
    <div class="shop">
      <div class="phto">
        <img :src="data.pic" alt="">
        <span style="color: #ffffff;">{{data.name}}</span>
      </div>
      <div class="shop-info">
        <div>
          <img src="../../assets/images/Fourimg/fdh(2)@2x.png" alt="">
          <a  style="color: #ffffff;" :href="'tel:' + data.phone"><span>{{data.phone}}</span></a>
          <img src="../../assets/images/Fourimg/fdh(2)@2x.png" alt="">
          <a  style="color: #ffffff;" :href="'tel:' + data.phoneRes"><span>{{data.phoneRes}}</span></a>
        </div>
        <div @click="address()">
          <img src="../../assets/images/Fourimg/fdz(1)@2x.png" alt="">
          <span style="color: #ffffff;">{{data.address}}</span>
        </div>

      </div>

    </div>


    <!-- 商家详情 -->
    <div class="detail">
      <h4  style="color: #ffffff;">商家介绍:</h4>
      <div style="color: #ffffff;" v-html="data.content"></div>

      <!--<img src="../../assets/images/newimg/zu82@2x.png" alt="">-->
      <div id="output" style="display:none"></div>

    </div>
    <div class="detail" id="gongzhonghao" v-show="gongzhonghao">
      <a  style="color: #ffffff;" :href="data.gongzhonghao"><span>跳转公众号</span></a>
    </div>

    <video  :src="data.radio" id="video" controls :poster="data.videoImg" style="width:100% ">
    </video>


  </div>
</template>
Vue.component('video-player',{template:'#video-player'})
<script>
  import Swiper from 'swiper'
  import '../../assets/swiper.min.css'

  window.onload=function(){
    var video, output;
    var scale = 0.8;
    var initialize = function() {
      output = document.getElementById("output");
      video = document.getElementById("video");
      video.addEventListener('loadeddata',captureImage);
    };


    var captureImage = function() {
      var canvas = document.createElement("canvas");
      canvas.width = video.videoWidth * scale;
      canvas.height = video.videoHeight * scale;
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      var img = document.createElement("img");
      img.src = canvas.toDataURL("image/png");
      alert(img.src)
      output.appendChild(img);
    };


  }
  export default {
    data() {
      var that=this
      return {
        businessId: '',
        activityId: '',
        data: '',
        gongzhonghao : false
      }
    },
    methods: {
      initialize(){
      },
      address () {
        var that = this

        wx.ready(function () {
          wx.openLocation({
            latitude: parseFloat(that.data.right), // 纬度，浮点数，范围为90 ~ -90
            longitude: parseFloat(that.data.left), // 经度，浮点数，范围为180 ~ -180。
            name: that.data.address, // 位置名
            address: that.data.address, // 地址详情说明
            scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
          })
        })
      },
    },
    mounted() {
      var that = this
      this.businessId = this.$route.params.businessId;
      this.activityId = this.$route.params.activityId;
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/getBusinessInfo?businessId=' + this.businessId
      }).then(function(res) {
        if(res.status === 200) {
          that.data = res.data
          that.initialize();
          console.log(that.data)
          if(res.data.gongzhonghao.length > 0){
            that.gongzhonghao = true
          }
          var swiper = new Swiper('.swiper-container', {
            loop: false,
            initialSlide: 0,
            observer: true,
            centeredSlides: true, //true 为slide居中
            autoplay: true, //zidong
            onTouchEnd: function() {
              swiper.startAutoplay()
            }
          })
        }
      })

      // 分享接口调用
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/wx/queryWxConfig?activityId=' + that.activityId + '&wxOpenId=' +
          that.userOpenId + '&inviteUserOpenId=' + that.inviteUserOpenId+'&type=shop&businessId='+that.businessId
      }).then(function (res) {
        if (res.status === 200) {
          console.log(res.data.appid)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appid, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ['checkJsApi', 'getLocation', 'openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          })
        } else {
          alert(res.data.errorMessage)
        }
      })

      wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度
        }
      });
    }
  }
</script>

<style scoped>
  .backimg {
    width: 7.5rem;
    min-height: 100vh;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -99;
  }
  /* 标题 */

  .head {
    width: 100vw;
    height: 1rem;
    /*background: #111111;*/
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .head img {
    width: .2rem;
    position: absolute;
    left: .3rem;
    top: .35rem
  }

  .head span {
    font-size: .3rem;
    font-family: PingFang-SC-Regular;
    font-weight: 400;
    color: rgba(51, 54, 58, 1);
  }
  /* banner图 */

  .banner {
    height: 6rem;
    width: 100vw;
    overflow: hidden;
  }

  .banner img {
    width: 100%;
  }

  .shop {
    padding: .4rem 0;
    width: 6.85rem;
    margin: 0 auto;
    border-bottom: .01rem solid rgba(198, 198, 198, 1);
  ;
  }

  .shop,
  .phto {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /*background: #1d1d1d;*/
    color: rgba(51, 54, 58, 1);
    font-size: .3rem;
  }

  .phto img {
    width: .9rem;
    padding-right: .3rem;
  }

  .shop-info {
    padding-right: .2rem;
  }

  .shop-info div:last-child {
    padding-top: .2rem;
  }

  .shop-info div img {
    width: .3rem;
    vertical-align: middle;
  }

  .detail {
    color: rgba(51, 54, 58, 1);
    font-size: .24rem;
    padding: .2rem 0;
    width: 6.85rem;
    margin: 0 auto;
  }

  .detail h4 {
    font-size: .26rem;
    color: rgba(51, 54, 58, 1);
  }

  .detail p {
    padding-top: .2rem;
    text-indent: 2em;
    line-height: .4rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .detail img {
    padding-left: 49%;
    padding-top: .2rem;
    width: .3rem;
  }

  .video{
    width: 7.5rem;
    background:rgba(255,255,255,1);
    overflow: hidden;
    height: 3.38rem;
  }
  .video video{
    margin: .3rem 5% 0;
    border-radius: .2rem;
    width: 90%;
    height: 2.9rem;

  }
</style>
